<template>
  <div class="app-container page-container">
    <div class="devote-content">
      <div class="form-box">
        <div class="title-box"> 投放计划组信息</div>
        <el-form :model="form" :rules="rules" ref="devoteRef" label-width="120px">
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="计划组名称" prop="planName">
                <el-input
                  :disabled="operType === 'edit'"
                  v-model="form.planName"
                  placeholder="请输入名称"
                  maxlength="50"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="投放时间" prop="planTime">
                <el-date-picker
                  :disabled="operType === 'edit'"
                  style="width: 100%"
                  v-model="form.planTime"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="计划状态" prop="status">
                <el-select
                  v-model="form.status"
                  disabled
                  placeholder="请选择状态"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in props.devoteStatusOptions"
                    :key="index"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="计划描述" prop="description">
                <el-input
                  v-model="form.description"
                  type="textarea"
                  placeholder="请输入文字"
                  maxlength="300"
                  :rows="3"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="flex-center">
        <el-button @click="cancelParent">取 消</el-button>
        <el-button type="primary" @click="submitForm" :loading="loadingSubmit">{{
          operType === 'add' ? '新增' : '更新'
        }}</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { defineProps, nextTick } from 'vue'
import { addDevote, updateDevote } from '@/api/devote'

const props = defineProps({
  receiveData: {
    type: Object,
    default: () => {}
  },
  devoteStatusOptions: {
    type: Array,
    default: () => []
  }
})
const emit = defineEmits(['goback', 'cancel'])
const gobackParent = () => {
  emit('goback')
}
const cancelParent = () => {
  emit('cancel')
}

const { proxy } = getCurrentInstance()
const loadingSubmit = ref(false)
const devoteRef = ref()

const form = ref({
  planName: null,
  planTime: null, //form投放时间
  startTime: null,
  endTime: null,
  status: null,
  description: null,
  cityName: null
})
const rules = {
  planName: [{ required: true, message: '计划组名称不能为空', trigger: 'blur' }],
  planTime: [{ required: true, message: '投放时间不能为空', trigger: 'change' }],
  status: [{ required: true, message: '计划状态不能为空', trigger: 'change' }]
}

function submitForm() {
  proxy.$refs['devoteRef'].validate((valid) => {
    if (valid) {
      loadingSubmit.value = true
      let { planTime = [], ...obj } = form.value
      obj.startTime = getTimestamp(planTime[0]) || ''
      obj.endTime = getTimestamp(planTime[1]) || ''
      if (operType.value === 'add') {
        addDevote(obj).then(
          (res) => {
            proxy.$modal.msgSuccess('新增成功')
            gobackParent()
          },
          (error) => {
            loadingSubmit.value = false
          }
        )
      } else {
        ElMessageBox.confirm('确认要修改这行数据吗?', '系统提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
          center: false
        })
          .then(() => {
            updateDevote(obj).then((res) => {
              proxy.$modal.msgSuccess('更新成功')
              gobackParent()
            })
          })
          .catch(() => {
            loadingSubmit.value = false
          })
      }
    }
  })
}

const operType = ref('add')

function operInit() {
  operType.value = props.receiveData.operType
  reset()
  if (props.receiveData.operType === 'edit') {
    form.value = {
      planId: props.receiveData.data.planId,
      planName: props.receiveData.data.planName,
      planTime: [props.receiveData.data.startTime, props.receiveData.data.endTime],
      startTime: props.receiveData.data.startTime,
      endTime: props.receiveData.data.endTime,
      status: props.receiveData.data.status,
      description: props.receiveData.data.description,
      cityName: props.receiveData.data.cityName
    }
  } else {
    form.value.cityName = props.receiveData.cityName
  }
}

function reset() {
  form.value = {
    planId: null,
    planName: null,
    planTime: null, //form投放时间
    startTime: null,
    endTime: null,
    status: operType.value === 'add' ? 'AwaitStart' : null,
    description: null,
    cityName: null
  }
  if (devoteRef.value) {
    devoteRef.value.resetFields()
  }
  loadingSubmit.value = false
}
function getTimestamp(dateStr) {
  return new Date(dateStr).getTime()
}

operInit()
</script>

<style lang="scss" scoped>
.devote-content {
  .form-box {
    min-height: 620px;
  }
  .title-box {
    width: 100%;
    color: var(--el-text-color-primary);
    font-size: 16px;
    font-weight: 700;
    padding-left: 5px;
    border-left: 4px solid #2f51ff;
    margin-bottom: 40px;
    margin-left: 10px;
  }
}
</style>
